<template>
  <div class="xtx-select" :style="{width:width}" v-clickoutside="handlerClose">
    <div class="curr" @click="toggleMenu">
      <div class="select"  v-if="label">{{label}}</div>
      <div class="ph" v-else>{{placeholder}}</div>
      <span class="iconfont icon-arrow-down" :class="{up:open}"></span>
    </div>
    <div class="list" v-show="open">
      <template v-if="options.length">
        <div class="item" @click="change(item)" v-for="item in options" :key="item[optionValue]">
          {{item[optionLabel]}}
        </div>
      </template>
      <template v-else>
        <div class="none">暂无数据</div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'xtx-select',
  props: {
    // 选中的值value（绑定的值）
    value: {
      type: [String, Number]
    },
    // 组件width属性（宽度）
    width: {
      type: String,
      default: '300px'
    },
    // 组件placeholder属性（占位）
    placeholder: {
      type: String,
      default: '请选择'
    },
    // 组件options属性（选项）
    options: {
      type: Array,
      required: true
    },
    // 组件option-value属性（选项字段值）
    optionValue: {
      type: String,
      default: 'value'
    },
    // 组件option-label属性（选项字段名）
    optionLabel: {
      type: String,
      default: 'label'
    }
  },
  data () {
    return {
      open: false
    }
  },
  computed: {
    label () {
      const obj = this.options.find(item => item[this.optionValue] === this.value)
      return obj ? obj[this.optionLabel] : ''
    }
  },
  methods: {
    handlerClose () {
      this.open = false
    },
    toggleMenu () {
      if (this.open) {
        this.handlerClose()
      } else {
        this.open = true
      }
    },
    change (item) {
      if (item[this.optionValue] === this.value) return
      this.$emit('input', item[this.optionValue])
      this.$emit('change', item[this.optionValue])
      this.handlerClose()
    }
  }
}
</script>

<style scoped lang='less'>
// 自定义下拉框
.xtx-select {
  width: 300px;
  height: 50px;
  position: relative;
  display: inline-block;
  user-select: none;
  .curr {
    width: 100%;
    height: 50px;
    padding-left: 10px;
    padding-right: 30px;
    border: 1px solid #e4e4e4;
    overflow: hidden;
    .ph {
      color: #cccccc;
    }
    .iconfont {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 30px;
      color: #cccccc;
      transition: all 0.5s;
      &.up {
        transform: rotate(-180deg);
      }
    }
  }
  .list {
    position: absolute;
    left: 0;
    top: 50px;
    border: 1px solid #e4e4e4;
    border-top: none;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background: #ffffff;
    z-index: 9999;
    .none {
      color: #999;
      text-align: center;
      line-height: 80px;
    }
    .item {
      line-height: 40px;
      height: 40px;
      width: 100%;
      overflow: hidden;
      padding-left: 10px;
      cursor: pointer;
      color: #666666;
      &:hover {
        background: #f5f5f5;
      }
    }
  }
}
</style>
